<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
	</head>
	<body>
		<form class="layui-form" action="" lay-filter="form-filter">
			<div class="mainBox">
				<div class="main-container">
				    <div class="layui-form-item layui-hide">
                        <label class="layui-form-label required">ID</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" class="layui-input" disabled>
                        </div>
                    </div>
					<div class="layui-form-item">
						<label class="layui-form-label required">所属栏目</label>
						<div class="layui-input-block">
							<input type="hidden" name="subjectId" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label required">课程名称</label>
						<div class="layui-input-block">
							<input type="text" name="name" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label required">课程展现类型</label>
							<div class="layui-input-block">
								<input type="radio" name="showType" lay-filter="radio-showType-filter">
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label required">课程类型</label>
							<div class="layui-input-inline">
								<select name="type" lay-verify="required"></select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label required">老师</label>
						<div class="layui-input-block">
							<input type="hidden" name="teacherIds" placeholder="" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label required">课程课时</label>
						<div class="layui-input-block">
							<input type="number" name="sort" value="0" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label required">排序</label>
						<div class="layui-input-block">
							<input type="number" name="sort" value="0" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label required">状态</label>
						<div class="layui-input-block">
							<input type="checkbox" name="status" title="开启|关闭" lay-skin="switch" checked>
						</div>
					</div>

				</div>
			</div>
			<div class="bottom">
				<div class="button-container">
					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="submit-filter">
						<i class="layui-icon layui-icon-ok"></i>提交
					</button>
					<button type="reset" class="pear-btn pear-btn-sm">
						<i class="layui-icon layui-icon-refresh"></i>重置
					</button>
				</div>
			</div>
		</form>
		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>
		<script>
			layui.use(['form', 'jquery', 'vtlForm', 'dict'], function() {
				let form = layui.form;
				let $ = layui.jquery;
				let vtlForm = layui.vtlForm;
				let dict = layui.dict;
				let url = layui.url();
				let id = url.search.id;
				let dictTypeCode = url.search.typeCode;

				let subjectSelect;

				form.on('submit(submit-filter)', function(data) {
					//状态处理
					let statusInput =  $('form input:checkbox[name=status]');
					data.field.status = statusInput.is(':checked') ? 0 : 1;
					//老师数组处理
					data.field.teacherIds = data.field.teacherIds.split(',');
				    if(id) {
				        $.put('/crm/course/update', JSON.stringify(data.field), function(result) {
                            if (result.code == 0) {
                                $.vtl.closeLayer();
                                parent.refreshCourse();
                                dict.clear();
                            }
                        });
				    } else {
				        $.post('/crm/course/create', JSON.stringify(data.field), function(result) {
                            if (result.code == 0) {
                                $.vtl.closeLayer();
                                parent.refreshCourse();
                                dict.clear();
                            }
                        });
				    }

					return false;
				});

				window.initTeacherSelector = function() {
					let data = [
						{name: '张三', id: 1},
						{name: '李四', id: 2},
						{name: '王五', id: 3},
					];
					// $.sync('get', '/sys/menu/treeTableDataList', function(result){
					// 	data = $.vtl.tree(result, '0');
					// });

					let config = { data: data};
					vtlForm.initXmSelect('form input:hidden[name=teacherIds]', config);
				}

				window.initSubjectIdSelector = function() {
					let data = [];
					$.sync('get', '/crm/subject/simple-list', function(result){
						data = $.vtl.tree(result.data, 0);
					});

					let config = { data: data, radio: true, clickClose: true, tree: { show: true, expandedKeys: false }};
					subjectSelect = vtlForm.initXmSelect('form input:hidden[name=subjectId]', config);
				}

				window.init = function(id) {
					vtlForm.initSelectByDict('form select[name=type]', 'crm_course_type');
					vtlForm.initRadioByDict('form input:radio[name=showType]', 'crm_course_show_type');

					window.initSubjectIdSelector();
					window.initTeacherSelector();
				    if(id) {
                		$.get('/crm/course/get?id=' + id, function(result) {
                            form.val("form-filter", result.data);
							if(!$.vtl.isBlank(result.data)){
								$('form input:checkbox[name="status"]').prop('checked', result.data.status === 0);
							}
                        });
                    } else {
                    	form.val("form-filter", { dictType: dictTypeCode });
                    }


				}

				window.init(id);
			})
		</script>
	</body>
</html>
